<!-- 日常运维 -->
<template>
	<div class="operationList" v-loading="operationListLoading">
		<div class="title">日常运维</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" label-width="90px" inline>
        
        <el-row>
          <el-form-item label="站点名称">
            <!-- <el-input v-model="searchForm.enterpriseName" placeholder="请输入企业名称"></el-input> -->
            <el-select v-model="searchForm.station" placeholder="请选择水站名称">
              <p v-for="(item, index) of stationList" :key="index">
                <el-option :label="item" :value="item"></el-option>
              </p>
            </el-select>
          </el-form-item>
          <el-form-item label="运维类型">
            <el-select v-model="searchForm.type" placeholder="请选择运维类型">
              <el-option label="废液转运" value="废液转运"></el-option>
              <el-option label="纯水添加" value="纯水添加"></el-option>
              <el-option label="试剂更换" value="试剂更换"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item >
            <p slot="label">开始时间</p>
            <el-date-picker
              v-model="searchForm.startTime"
              placeholder="选择开始时间"
              :clearable="false"
              value-format="yyyy-MM-dd">
            </el-date-picker>

          </el-form-item>
          <el-form-item>
            <p slot="label">结束时间</p>
            <el-date-picker
              v-model="searchForm.endTime"
              placeholder="选择结束时间"
              :clearable="false"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
            <el-button type="primary" class="greenBtn" size="mini" @click="added">新增</el-button>
          </el-form-item>
        </el-row>
        <!-- <el-form-item label="时间" label-width="60px">
          <el-date-picker
            v-model="searchForm.time"
            type="date"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item> -->
        
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="operationList.data" stripe size="mini"
        style="width: 100%" :header-cell-style="{color: '#666', backgroundColor: '#fafafa'}"
        :cell-style="{
          borderBottom: 'none',
          height: '50px'
        }"
      > 
        <el-table-column
          prop="gmtCreate"
          label="时间"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="person"
          label="人员"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center">
          <template slot-scope="{ row }">
            <span v-if="row.status === 1">已完成</span>
            <span v-else class="TableWarnRed">未完成</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="运维类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="content"
          label="运维详情"
          width="320"
          align="center">
        </el-table-column>
        <el-table-column
          prop="operating"
          label="操作"
          width="130"
          align="center">
          <template slot-scope="scope">
            <el-button class="operating" v-show="scope.row.status === 1" size="mini" type="text" @click="openDetailDialog(scope.row)">详情</el-button>
            <el-button class="operating" v-show="scope.row.status !== 1" size="mini" type="text" @click="opensolveDialog(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="operationList.total"></myPaging>

    <!-- 详情 -->
    <el-dialog width="50%" top="5vh" :visible.sync="detailVisble" append-to-body>
      <div slot="title">
        <p>详情</p>
      </div>
      <el-form style="padding-left: 10%;" v-model="detailForm" label-position="left" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="水站名称：">
              {{detailForm.station}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间：">
              {{detailForm.gmtCreate}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维人员：">
              {{detailForm.person}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维类型：">
              {{detailForm.type}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="状态：">
            <span class="TableWarnRed" v-show="detailForm.status === 0">未解决</span>
            <span v-show="detailForm.status === 1">已解决</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="运维详情：">
            {{detailForm.content}}
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="图片：">
            <span v-show="detailForm.detailImage.length <= 0">无图片</span>
            <viewer v-show="detailForm.detailImage.length" :images="detailForm.detailImage">
              <img v-show="detailForm.detailImage.length" v-for="(img, key) in detailForm.detailImage" :key="key" :src="'http://47.112.16.168:' + img" class="imgItem pointer" />
            </viewer>
          </el-form-item>
        </el-row>


      </el-form>
    </el-dialog>
    
    <!-- 处理 -->
    <el-dialog width="50%" :visible.sync="solveVisble" append-to-body>
      <div slot="title">
        <p>处理</p>
      </div>
      <el-form :model="solveForm" :rules="solveFormRules" size="mini" ref="solveForm" label-width="80px" v-loading="solveFormLoading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="运维时间" prop="gmtOperate">
              <el-date-picker
                v-model="solveForm.gmtOperate"
                type="datetime"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维人员" prop="person">
              <el-input v-model="solveForm.person" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="运维内容" style="width: 100%" prop="content">
          <el-input type="textarea" :rows="4" v-model="solveForm.content" placeholder="请填写处理方案"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" style="margin-top: 15px;" prop="photoFiles">
          <el-upload
            ref="solveUploadPhoto"
            action=""
            :file-list="solveForm.files"
            list-type="picture-card"
            multiple
            :limit="4"
            :on-change="solutionUploadChange"
            :on-exceed="solutionUploadExceed" 
            :http-request="solutionHandleSubmit"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
            <!-- <el-button>点击上传</el-button> -->
            <!-- <span slot="tip" class="uploadTip">请上传身份证正反面</span> -->
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="solutionSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog width="70%" :visible.sync="addedFormVisible" append-to-body>
      <div slot="title">
        <p>新增</p>
      </div>
      <el-form :model="addedForm" :rules="addedFormRules" size="mini" ref="addedForm" label-width="100px" v-loading="addedFormLoading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="时间" prop="gmtOperate" >
              <el-date-picker
                v-model="addedForm.gmtOperate"
                type="datetime"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水站名称" prop="station" >
              <el-select v-model="addedForm.station" style="width: 100%" placeholder="请选择水站名称">
                <p v-for="(item, index) of stationList" :key="index">
                  <el-option :label="item" :value="item" se></el-option>
                </p>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运维人员" prop="person" >
              <el-input v-model="addedForm.person" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维类型" prop="type">
            <el-select v-model="addedForm.type" style="width: 100%" placeholder="请选择运维类型">
              <el-option label="废液转运" value="废液转运"></el-option>
              <el-option label="纯水添加" value="纯水添加"></el-option>
              <el-option label="试剂更换" value="试剂更换"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详情" prop="content" style="width: 100%">
          <el-input type="textarea" :rows="4" v-model="addedForm.content" placeholder="请填写事件详情"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" label-width="100px" style="margin-top: 15px;" prop="photoFiles">
          <el-upload
            ref="addUploadPhoto"
            action=""
            :file-list="addedForm.files"
            list-type="picture-card"
            multiple
            :limit="4"
            :on-change="uploadChange"
            :on-exceed="uploadExceed" 
            :http-request="handleSubmit"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
            <!-- <el-button>点击上传</el-button> -->
            <!-- <span slot="tip" class="uploadTip">请上传身份证正反面</span> -->
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="addedSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'
import common from '@/plugins/common'
import posts from '@/plugins/request'
export default {
  name: 'operationList',
  data () {
    return {
      msg: 'hello operationList!',
      operationList: {
        data: [],
        total: 0,
      },
      operationListLoading: false,
      receUserLoading: false,
      searchForm: {
        station: "",
        type: "",
        startTime: "",
        endTime: "",
      },
      
      detailVisble: false,
      detailForm: {
        detailImage: [],
        solutionImage: []
      },

      addedFormVisible: false,
      addFormData: {},
      addedFormLoading: false,
      addedForm: {
        gmtOperate: "",
        station: "",
        person: "",
        type: "",
        content: "",
        files: [],
        photoFiles: []
      },
      addedFormRules: {
        time: [
          { type: 'string', required: true, message: '请选择时间', trigger: 'blur' }
        ],
        station: [
          { required: true, message: '请选择水站', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择运维类型', trigger: 'change' },
        ],
        content: [
          { required: true, message: '请输入问题内容', trigger: 'blur' },
        ],
        // photoFiles: [
        //   { required: true, message: '请选择照片', trigger: 'change' },
        // ],
      },
      
      solveVisble: false,
      solveFormLoading: false,
      solveFormData: {},
      solveForm: {
        photoFiles: [],
        files: []
      },
      solveFormRules: {
        gmtOperate: [
          { type: 'string', required: true, message: '请选择时间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入解决方案', trigger: 'blur' },
        ],
      },
		}
  },
	methods: {
    ...mapActions([
      "getOperationList",
      "addOperationRecord",
      "solveOperationRecord",
      "updateOperationRecord"
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.operationListLoading = true
      const res = await posts.getDailyOperationList({...this.searchForm, ...pageOption})
      this.operationList.data = res.records
      this.operationList.total = res.total
      this.operationListLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
  
    loopAppend(formData, key, value) {
      formData.append(key, value)
    },
    setEditRow(index) {
      if (this.editIndex !== -1) {
        this.$message({
          message: "请先完成当前行编辑🙏",
          type: "warning"
        });
        return;
      }
      this.editIndex = index;
    },
    openDetailDialog(data) {
      this.detailVisble = true
      
      let detailImage = []
      if(data.image) {
        detailImage = data.image.split(",")
        detailImage.pop()
      }
      this.detailForm = Object.assign({}, data, {detailImage: detailImage})
    },
    async solutionSubmit() {
      this.$refs['solveForm'].validate(async (valid) => {
        if(valid) {
          this.solveFormLoading = true
          this.solveFormData = new FormData()
          let solveForm = this.solveForm
          this.$refs.solveUploadPhoto.submit()
          for(let i in solveForm) {
            this.loopAppend(this.solveFormData, i, solveForm[i])
          }
          let result = await posts.updateDailyOperation(this.solveFormData)
          if(result.message !== 'success') {
            this.$notify({
              type: 'warning',
              title: '提示',
              message: result.info,
            })
          }else {
            this.$notify({
              type: 'success',
              title: '成功',
              message: "提交成功",
            })
            this.$refs['solveForm'].resetFields();
            this.$refs['solveUploadPhoto'].clearFiles();
            this.solveVisble = false
            this.onSubmit()
          }
          this.solveFormLoading = false
        }else {
          return false;
        }
      })
    },
    solutionUploadChange(file, fileList){
			this.solveForm.photoFiles = fileList
    },
    solutionUploadExceed() {
			this.$notify.warning({
				title: '警告',
				message: '最多上传4张图片',
			})
    },
    solutionHandleSubmit(response) {
			this.solveFormData.append('files', response.file)
    },
    opensolveDialog(data) {
      this.solveVisble = true
      this.solveForm.id = data.id
      this.solveForm.status = 1
      this.solveForm.person = this.userInfo.user.username
      this.solveForm.station = data.station
      this.solveForm.type = data.type
    },

    async addedSubmit() {
      this.$refs['addedForm'].validate(async (valid) => {
        if(valid) {
          this.addedFormLoading = true
          this.addFormData = new FormData()
          let addedForm = this.addedForm
          this.$refs.addUploadPhoto.submit()
          for(let i in addedForm) {
            this.loopAppend(this.addFormData, i, addedForm[i])
          }
          let result = await posts.updateDailyOperation(this.addFormData)
          if(result.message !== 'success') {
            this.$notify({
              type: 'warning',
              title: '提示',
              message: result.info,
            })
          }else {
            this.$notify({
              type: 'success',
              title: '成功',
              message: "新增成功！",
            })
            this.$refs['addedForm'].resetFields();
            this.$refs["addUploadPhoto"].clearFiles()
            this.addedFormVisible = false
            this.onSubmit()
          }
          this.addedFormLoading = false
        }else {
          return false;
        }
      })
    },
    added() {
      this.addedFormVisible = true
      this.addedForm.person = this.userInfo.user.username
    },
    uploadChange(file, fileList){
			this.addedForm.photoFiles = fileList
    },
    uploadExceed() {
			this.$notify.warning({
				title: '警告',
				message: '最多上传4张图片',
			})
    },
    handleSubmit(response) {
			this.addFormData.append('files', response.file)
    },
  },
  created() {
    this.searchForm.station = this.stationList[0]
    this.searchForm.startTime = common.changeDateToString(new Date(new Date().getTime() - 2592000000))
    this.searchForm.endTime = common.changeDateToString(new Date()) 
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      userInfo: 'getUserInfo',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.operationList {
  background: #fff;
  padding: 0 20px 0 20px;
  min-height: 100%;
}
.operationList .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.operationList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.imgItem {
  max-width: 200px;
  margin-right: 15px;
}
.tableBox .operating {
  margin-left: 0;
  margin-right: 10px;
}
</style>
